<script setup>
import { ref, reactive, computed } from 'vue'

const user = reactive({
    firstName: 'chen',
    lastName: 'pu',
})


const message = ref('')
const messages = ref([])

function addMessage() {
    if (message.value.trim()) {
        messages.value.push({
            content: message.value.trim(),
            time: new Date().toLocaleString()
        })
        message.value = ''
    }
}

const fullname = computed({
    get() {
        return user.firstName + '-' + user.lastName
    },
    set(newValue) {
        const names = newValue.split('-')
        user.firstName = names[0]
        user.lastName = names[1]
    }
})
</script>

<template>
    <div>
        <hr>
        <h2 style="color: #666">备忘录</h2>
        <div style="margin: 20px 0">
            <textarea 
                v-model="message" 
                placeholder="输入信息..."
                style="width: 300px; height: 80px"
            ></textarea>
            <br>
            <button @click="addMessage" style="margin-top: 10px">添加</button>
        </div>
        
        <div v-if="messages.length">
            <div 
                v-for="(msg, index) in messages" 
                :key="index"
                style="border: 1px solid #ddd; padding: 10px; margin: 10px 0"
            >
                <p>{{ msg.content }}</p>
                <small style="color: #999">{{ msg.time }}</small>
            </div>
        </div>
        <div v-else style="color: #999">
            快来第一个吧~
        </div>
    </div>
</template>

<style scoped>

</style>